<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0" name="viewport">
		<meta content="ie=edge" http-equiv="X-UA-Compatible">
		<title>请修改网页标题</title>
	</head>

	<body>
		<div id="app">
			<!-- VUE 绑定事件 -->
			<button v-on:click="search()">查询1</button>

			<!-- 绑定事件简写 -->
			<button @click="search()">查询2</button>

			<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
			<!-- 事件方法没有参数时可以省略() -->
			<button v-on:click="search">查询3</button>
			<p>您要查询的是：{{searchMap.keyWord}}</p>
			<p><a target="_blank" v-bind:href="result.site">{{result.title}}</a></p>
		</div>
		<script src="../00 Static/vue.min.js"></script>
		<script>
			// 创建一个 vue 对象
			new Vue({
				// 绑定 vue 作用的范围
				el: '#app',
				// 定义页面中显示的模型数据
				data: {
					searchMap: {
						keyWord: '尚硅谷'
					},
					//查询结果
					result: {}
				},
				// 定义方法
				methods: {
					search() {
						console.log('search');
						this.result = {
							"title": "尚硅谷",
							"site": "http://www.atguigu.com"
						}
					}
				}
			})
		</script>
	</body>

</html>
